{% extends "base.html" %}
{% block content %}


<div id="content-page" class="content-page">
    <div class="container">
        <div class="row">

            <div class="media align-items-center mb-4"
                 style="width: 100%; font-size: xx-large; ">
                <div class="mine-bg">
                    <img sizes="(min-width: 1280px) 232px, 192px"
                         src="{{artist['images'][0]['url']}}" alt="" style="" class="mine-img">
                </div>
                <div class="media-body ml-3">
                    <h6 class="mb-0">{{artist['name']}}</h6>
                    <p class="mb-0">{{artist['followers']['total']}} followers</p>
                    {% if not spotify.current_user_following_artists([artist["id"]])[0] %}
                    <button id="follow-button" type="button" class="btn btn-outline-primary mb-3" onclick="FollowArtist(`{{spotify.auth_manager.get_access_token()['access_token']}}`, `{{artist['id']}}`)">Follow</button>
                    {% else %}
                    <button id="follow-button" type="button" class="btn btn-outline-primary mb-3" onclick="UnfollowArtist(`{{spotify.auth_manager.get_access_token()['access_token']}}`, `{{artist['id']}}`)">Unfollow</button>
                    {% endif %}
                </div>
            </div>


            <div class="col-sm-12">
                <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                    <div class="iq-card-header d-flex justify-content-between">
                        <div class="iq-header-title">
                            <h4 class="card-title">Top Tracks</h4>
                        </div>

                    </div>
                    <div class="iq-card-body">
                        <ul id="top-tracks" class="d-flex list-inline m-0 p-0 slick-initialized slick-slider">
                            <div class="slick-list draggable">
                                <div class="slick-track">
                                    <ul id="top-music" class="d-flex list-inline m-0 p-0">

                                        {% for song in top_tracks %}

                                        <li class="text-center col-sm-2">
                                            <div class="music-thumbnail position-relative mb-3">
                                                {%set image = '/static/images/white.jpg' %}
                                                {% if song['album']['images'] %}{% set image = song['album']['images'][0]['url']%}{%endif%}
                                                <a href="/music/track/{{song['id']}}"><img src="{{image}}"
                                                                 alt="music-thumb"
                                                                 class="img-fluid w-100">
                                                </a>
                                            </div>
                                            <a href="/music/artist/{{song['artists'][0]['id']}}"><h6>{{song['artists'][0]['name']}}</h6></a>
                                            <p class="mb-0">{{song['name']}}</p>
                                        </li>

                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>

            {% if albums %}
            <div class="col-sm-12">
                <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                    <div class="iq-card-header d-flex justify-content-between">
                        <div class="iq-header-title">
                            <h4 class="card-title">Albums</h4>
                        </div>
                        {% if albums|length > 6 %}
                        <div class="iq-card-header-toolbar d-flex align-items-center">
                            <a href="/music/artist/{{artist['id']}}/albums">View All</a>
                        </div>
                        {% endif %}
                    </div>
                    <div class="iq-card-body">
                        <ul id="albums" class="d-flex list-inline m-0 p-0 slick-initialized slick-slider">
                            <div class="slick-list draggable">
                                <div class="slick-track">
                                    <ul id="album-track" class="d-flex list-inline m-0 p-0">

                                        {% for album in albums %}

                                        <li class="text-center col-sm-2">
                                            <div class="music-thumbnail position-relative mb-3">
                                                {% set image = '/static/images/white.jpg' %}
                                                {% if album['images'] %}{% set image = album['images'][0]['url'] %}{%endif%}
                                                <a href="/music/album/{{album['id']}}"><img src="{{image}}"
                                                                 alt="music-thumb"
                                                                 class="img-fluid w-100">
                                                </a>
                                            </div>
                                            <a href="/music/artist/{{album['artists'][0]['id']}}"><h6>{{album['artists'][0]['name']}}</h6></a>
                                            <p class="mb-0">{{album['name']}}</p>
                                        </li>

                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if singles %}
            <div class="col-sm-12">
                <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                    <div class="iq-card-header d-flex justify-content-between">
                        <div class="iq-header-title">
                            <h4 class="card-title">Singles and EP's</h4>
                        </div>
                        {% if singles|length > 6 %}
                        <div class="iq-card-header-toolbar d-flex align-items-center">
                            <a href="/music/artist/{{artist['id']}}/singles">View All</a>
                        </div>
                        {% endif %}
                    </div>
                    <div class="iq-card-body">
                        <ul id="singles" class="d-flex list-inline m-0 p-0 slick-initialized slick-slider">
                            <div class="slick-list draggable">
                                <div class="slick-track">
                                    <ul id="single-track" class="d-flex list-inline m-0 p-0">

                                        {% for single in singles %}

                                        <li class="text-center col-sm-2">
                                            <div class="music-thumbnail position-relative mb-3">
                                                {% set image = '/static/images/white.jpg' %}
                                                {% if single['images'] %}{% set image = single['images'][0]['url'] %}{%endif%}
                                                <a href="/music/album/{{single['id']}}"><img src="{{image}}"
                                                                 alt="music-thumb"
                                                                 class="img-fluid w-100">
                                                </a>
                                            </div>
                                            <a href="/music/artist/{{single['artists'][0]['id']}}"><h6>{{single['artists'][0]['name']}}</h6></a>
                                            <p class="mb-0">{{single['name']}}</p>
                                        </li>

                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if appears_on %}
            <div class="col-sm-12">
                <div class="iq-card iq-card-block iq-card-stretch iq-card-height">
                    <div class="iq-card-header d-flex justify-content-between">
                        <div class="iq-header-title">
                            <h4 class="card-title">Appears on</h4>
                        </div>
                        {% if appears_on|length > 6 %}
                        <div class="iq-card-header-toolbar d-flex align-items-center">
                            <a href="/music/artist/{{artist['id']}}/appears_on">View All</a>
                        </div>
                        {% endif %}
                    </div>
                    <div class="iq-card-body">
                        <ul id="appears_on" class="d-flex list-inline m-0 p-0 slick-initialized slick-slider">
                            <div class="slick-list draggable">
                                <div class="slick-track">
                                    <ul id="appears_on-track" class="d-flex list-inline m-0 p-0">

                                        {% for track in appears_on %}

                                        <li class="text-center col-sm-2">
                                            <div class="music-thumbnail position-relative mb-3">
                                                {% set image = '/static/images/white.jpg' %}
                                                {% if track['images'] %}{% set image = track['images'][0]['url'] %}{%endif%}
                                                <a href="/music/album/{{track['id']}}"><img src="{{image}}"
                                                                 alt="music-thumb"
                                                                 class="img-fluid w-100">
                                                </a>
                                            </div>
                                            <a href="/music/artist/{{track['artists'][0]['id']}}"><h6>{{track['artists'][0]['name']}}</h6></a>
                                            <p class="mb-0">{{track['name']}}</p>
                                        </li>

                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}

        </div>
    </div>
</div>
<!-- Wrapper END -->

{% endblock %}